<template>
  <el-form label-width="100px" >
        <el-form-item label="手机号">
            <el-col :span="8">
              {{getPhones}}
            </el-col>
        </el-form-item>
        <el-form-item label="验证码" prop="verificationCode">
            <el-col :span="8">
              <el-col :span="6"><span>{{SmsPreCode}}</span></el-col>
             <el-col :span="18">
               <el-input v-model.trim="verify" auto-complete="off" :maxlength="10" size="small" :disabled="isInput"></el-input>
              </el-col>
            </el-col>
            <el-col :span="8" :offset="1">
             <el-button :type="btntype" size="small" :disabled="showCheckBtn" @click="sendMessage">{{word}}</el-button>
            </el-col>
        </el-form-item>
        <p class="note" v-show="showNote">提示：请输入前缀为<span>{{SmsPreCode}}</span>的验证码</p>
  </el-form>
</template>
<style scoped>
form.el-form {
  text-align: left;
}
.note{
  color:#f00;
}
.el-form-item.diff{
  margin-bottom:0;
  margin-top:0;
}
</style>

<script>
import { erroShow, GetQueryString } from '@/util/util' // 防抖函数
export default {
  data () {
    return {
      phone: '', // 手机号
      word: '获取验证码',
      isOvertime: false,
      showCheckBtn: false,
      SmsPreCode: '',
      showNote: false,
      btntype: 'primary', // 验证码按钮样式
      verify: '', // 验证码
      interfaceTransSerial: null,
      isInput: true // 是否可输入
    }
  },
  props: ['captcha', 'veriInfo', 'preCode', 'veriFi', 'veriFifo', 'getPhone'],
  watch: {
    verify: function (newValue, oldValue) {
      this.$emit('update:captcha', newValue)
    },
    SmsPreCode: function (newValue, oldValue) {
      this.$emit('update:preCode', newValue)
    }
  },
  created () {
    this.interfaceTransSerial = GetQueryString('interfaceTransSerial')
  },
  computed: {
    getPhones () {
      return this.getPhone
      // return this.$store.state.user.userinfos && !this.interfaceTransSerial ? this.$store.state.user.userinfos.contactPhone : this.$store.getters.moniUserinfo
    }
  },
  methods: {
    sendMessage: sendMessage,
    init: Init
  }
}
var sendTimer
// 获取验证码
function sendMessage () {
  if (this.getPhones.length <= 0) {
    this.$message.error('请选择需要验证的手机')
    return
  }
  if (this.isOvertime) {
    return
  }
  this.isOvertime = true // 验证码获取中
  this.axios.post('/commonCust/getContractPlatformVerificationCode.do', {
    contactPhone: this.getPhones,
    transSerialNo: this.veriInfo,
    masterChainId: this.veriFi,
    loanId: this.veriFifo,
    custType: this.$store.state.user.userinfos.custType,
    interfaceTransSerial: this.interfaceTransSerial
  }).then(res => {
    if (res.data.status) {
      this.$message({
        message: res.data.msg,
        type: 'success'
      })
      this.SmsPreCode = res.data.data.SmsPreCode
      this.isInput = false
      this.showNote = true
      let that = this
      let time = 60
      this.btntype = ''
      this.showCheckBtn = true
      sendTimer = setInterval(function () {
        time--
        that.word = `${time}秒后重新发送`
        if (time < 0) {
          that.isOvertime = false // 重置可发送验证码
          that.btntype = 'primary'
          that.showCheckBtn = false
          clearInterval(sendTimer)
          that.word = '重新获取验证码'
        }
      }, 1000)
    } else {
      this.isOvertime = false // 重置可发送验证码
      this.showNote = false
      this.$message.error(res.data.msg)
    }
  }).catch(err => {
    this.isOvertime = false // 重置可发送验证码
    console.log(err)
    erroShow.call(this, err)
  })
}
function Init () {
  this.verify = '' // 验证码
  this.isInput = true // 是否可输入
  this.isOvertime = false
  this.showNote = false
  this.showCheckBtn = false
  this.btntype = 'primary'
  clearInterval(sendTimer)
  this.word = '获取验证码'
}
</script>
